// import { getFeatureProperties } from './cesiumUtils'
// import monitorSvg from '../assets/icn_monitor'
// import deviceSvg from '../assets/icn_device'
// import structureSvg from '../assets/icn_structure'

 // 创建弹窗对象的方法
const Popup = function(info) {
  this.constructor(info)
}
Popup.prototype.id = 0
Popup.prototype.constructor = function(info) {
  var _this = this
  _this.viewer = info.viewer || viewer// 弹窗创建的viewer
  _this.geometry = info.geometry// 弹窗挂载的位置
  _this.id = 'popup_' + Popup.prototype.id++
  _this.content = info.content

  const popupBx = document.createElement('div')
  _this.popupBx = popupBx
  popupBx.className = 'box-popup-ctn'
  popupBx.id = _this.id
  _this.viewer.container.appendChild(popupBx)
  // 测试弹窗内容
  this.updateContent(info.content)
  popupBx.style.position = 'absolute'
  _this.popupBx = popupBx
  _this.render(_this.geometry)
  // _this.eventListener = _this.viewer.clock.onTick.addEventListener(function(clock) {
  //     _this.render()
  // })
}

// 更新内容和位置
Popup.prototype.updateAll = function(info) {
  if (!info) {
    return
  }
  this.viewer = info.viewer || viewer
  this.popupBx.style.display = 'block'
  this.updateContent(info.content || '')
  this.updatePosition(info.geometry)
  this.render(info.geometry)
}

// 改变内容
Popup.prototype.updateContent = function(content) {
  // const properties = getFeatureProperties(content)
  const contentHtml = ''
  let name = ''
  let type = ''
  if (properties) {
    type = properties.type || ''
    // const list = [{ code: 'batchId' }, { code: `${type}Name` }, { code: 'type', name: '类型' }]
    // contentHtml = list.map(item => {
    //   return `<div>${item.code}: ${properties[item.code]}</div>`
    // }).join('')
    if (type) {
      name = properties[`${type}Name`]
      if (type === 'device') {
        console.log(properties)
      }
      console.log(name)
    }
  } else {
    // const list = [
      // { code: 'deviceId' },
      // { code: 'type' }
    // ]
    // contentHtml = list.map(item => {
    //   return `<div>${item.code}: ${content.id.cmData[item.code]}</div>`
    // }).join('')
    type = content.id.cmData.type || 'monitor'
    name = content.id.name
  }
  if (!type) {
    this.close()
  }

  const svgs = {
    device: deviceSvg,
    monitor: monitorSvg,
    structure: structureSvg
  }
  const testConfig = {
    header: `<img class="type-icon" src="${svgs[type]}" /><span class="popName">${name}</span>`,
    content: `<div>${contentHtml}</div>`
  }
  this.popupBx.innerHTML = this.createHtml(testConfig.header, testConfig.content)
}

// 改变位置
Popup.prototype.updatePosition = function(geometry) {
  this.geometry = geometry
}

// 实时刷新
Popup.prototype.render = function(g) {
  var _this = this
  const geometry = g || _this.geometry
  const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene, geometry)
  const offsetX = _this.popupBx.offsetWidth / 2
  const offsetY = _this.popupBx.offsetHeight
  _this.popupBx.style.left = position.x - offsetX + 'px'
  _this.popupBx.style.top = position.y - 50 - offsetY + 'px'
}
// 动态生成内容
Popup.prototype.createHtml = function(header, content) {
      var html = '<div class="bx-popup-header-ctn">' +
      header +
      '</div>' +
      '<div class="bx-popup-content-ctn" >' +
      '<div class="bx-popup-content" >' +
      content +
      '</div>' +
      '</div>' +
      '<div class="bx-popup-tip-container" >' +
      '<div class="bx-popup-tip" >' +
      '</div>' +
  '</div>'
  return html
}
// 关闭弹窗按钮
Popup.prototype.close = function() {
  this.popupBx.style.display = 'none'
}

Popup.prototype.destroy = function() {
  if (this.popupBx) {
    this.viewer.container.removeChild(this.popupBx)
    // this.viewer.clock.onTick.removeEventListener(this.eventListener)
  }
}

// export default Popup
